<template>
  <div class="main">
    <a-form style="max-width: 500px; margin: 40px auto 0;" :form="form">
      <a-form-item>
        <a-input
          v-decorator="['username', validatorRules.username]"
          size="large"
          type="text"
          autocomplete="false"
          placeholder="请输入用户名或手机号"
        >
          <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
        </a-input>
      </a-form-item>
      <a-row :gutter="0">
        <a-col :span="14">
          <a-form-item>
            <a-input
              v-decorator="['inputCode', validatorRules.inputCode]"
              size="large"
              type="text"
              @change="inputCodeChange"
              placeholder="请输入验证码"
            >
              <a-icon
                slot="prefix"
                v-if="inputCodeContent == verifiedCode"
                type="smile"
                :style="{ color: 'rgba(0,0,0,.25)' }"
              />
              <a-icon slot="prefix" v-else type="frown" :style="{ color: 'rgba(0,0,0,.25)' }" />
            </a-input>
          </a-form-item>
        </a-col>
        <a-col :span="10">
          <j-graphic-code @success="generateCode" style="float: right" remote></j-graphic-code>
        </a-col>
      </a-row>
      <a-form-item :wrapperCol="{ span: 19, offset: 5 }">
        <a-button type="primary" @click="nextStep">下一步</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import JGraphicCode from '@/components/tools/JGraphicCode'
import { queryUserInfo } from '@/api/api'

export default {
  name: 'Step1',
  components: {
    JGraphicCode
  },
  data() {
    return {
      form: this.$form.createForm(this),
      inputCodeContent: '',
      inputCodeNull: true,
      verifiedCode: '',
      validatorRules: {
        // , { validator: this.validateInputUsername }
        username: { rules: [{ required: true, message: '请输入用户名或手机号!' }] },
        inputCode: { rules: [{ required: true, message: '请输入验证码!' }, { validator: this.validateInputCode }] }
      }
    }
  },
  methods: {
    /**
     * 校验用户身份，是否合法
     */
    nextStep() {
      let that = this
      this.form.validateFields((err, values) => {
        if (!err) {
          var params = {}
          var reg = /^[1-9]\d*$|^0$/
          var username = values.username
          if (reg.test(username) == true) {
            params.phone = username
          } else {
            params.username = username
          }

          queryUserInfo(params).then(res => {
            const { data } = res
            if (res.code == 0) {
              var userList = {
                username: data.userName,
                phone: data.phone
              }
              setTimeout(function() {
                that.$emit('nextStep', userList)
              })
            } else {
              that.queryFail(res.msg)
            }
          })
        }
      })
    },

    queryFail(msg) {
      this.$notification['error']({
        message: '操作失败',
        description: msg,
        duration: 2
      })
    },

    /**
     * 验证码校验
     */
    validateInputCode(rule, value, callback) {
      if (!value || this.verifiedCode == this.inputCodeContent) {
        callback()
      } else {
        callback(new Error('您输入的验证码不正确!'))
      }
    },

    /**
     * 验证码变动时候校验
     */
    inputCodeChange(e) {
      this.inputCodeContent = e.target.value
      console.log(this.inputCodeContent)
      if (!e.target.value || 0 == e.target.value) {
        this.inputCodeNull = true
      } else {
        this.inputCodeContent = this.inputCodeContent.toLowerCase()
        this.inputCodeNull = false
      }
    },

    /**
     * 生成验证码
     */
    generateCode(value) {
      this.verifiedCode = value.toLowerCase()
      console.log(this.verifiedCode)
    }

    /**
     * 校验输入的用户名
     */
    // validateInputUsername(rule, value, callback) {
    //   console.log(value)
    //   var reg = /^[0-9]+.?[0-9]*/
    //   if (!value) {
    //     callback('请输入用户名或手机号！')
    //     return
    //   }

    //   //判断用户输入账号还是手机号码
    //   var params = {}
    //   if (reg.test(value)) {
    //     params = {
    //       phone: value
    //     }
    //   } else {
    //     params = {
    //       username: value
    //     }
    //   }

    //   //校验手机号
    //   // checkOnlyUser(params).then(res => {
    //   //   if (res.code == 0) {
    //   //     callback('用户名或手机号不存在!')
    //   //   } else {
    //   //     callback()
    //   //   }
    //   // })
    // }
  }
}
</script>

<style scoped></style>
